<template>
  <div class="create-user-dialog">
    <el-dialog :visible.sync="visible">
      <div :class="`${isShow === false ? 'create-user' : 'create-user2' } createUser panelWrap` ">
        <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
          <div>创建用户</div>
          <i class="el-icon-close" @click="handleCloseDialog" />
        </div>
        <div class="form">
          <div v-if="!isShow" class="flexcenter reg1 flexdc">
            <div class="m-t-40 flex flexac">
              <span class="name texttr"><span class="mustval">*</span>手机号码：</span>
              <el-input v-model="form.mobile" required clearable class="cor-input" placeholder="请输入手机号" />
            </div>

            <div class="m-t-40 flex flexac">
              <span class="name texttr"><span class="mustval">*</span>短信验证码：</span>
              <el-input v-model="form.validateCode" clearable class="phoneCode cor-input" placeholder="请输入验证码" />
            </div>

            <div class="flexcenter nextbox m-t-60">
              <div class="sendbox m-r-20">
                <el-button class="reg-send" :disabled="disabled" @click="handleSend">{{ sendMsg }}</el-button>
              </div>
              <el-button class="reg-next" @click="handleNext">下一步</el-button>
            </div>
          </div>
          <!--  -->
          <div v-else class="reg2 flexcenter flexdc m-t-20">
            <div class="m-t-20 flex flexac">
              <span class="name1"><span class="mustval">*</span>姓名：</span>
              <el-input v-model="form.name" clearable class="pu-i" placeholder="请输入用户姓名" />
            </div>

            <div class="m-t-20 flex flexac">
              <span class="name1"><span class="mustval">*</span>登陆账号：</span>
              <el-input v-model="form.account" clearable class="pu-i" placeholder="请输入登陆账号" />
            </div>

            <div class="m-t-20 flex flexac">
              <span class="name1">邮箱：</span>
              <el-input v-model="form.email" clearable class="email" placeholder="请输入邮箱号" />
            </div>

            <div class="m-t-20 flex flexac">
              <span class="name1"><span class="mustval">*</span>密码：</span>
              <el-input v-model="form.pwd" clearable show-password placeholder="请输入密码" />
            </div>

            <div class="m-t-20 flex flexac">
              <span class="name1"><span class="mustval">*</span>确认密码：</span>
              <el-input v-model="form.checkPass" clearable show-password placeholder="请输入确认密码" />
            </div>

            <div class="m-t-20 flex flexac">
              <span class="name1"><span class="mustval">*</span>注册来源：</span>
              <el-select v-model="form.fromWhere" clearable placeholder="请选择注册来源">
                <el-option
                  label="维保技术员"
                  :value="4"
                />
              </el-select>
            </div>
            <div class="flex subbtnbox m-t-80">
              <el-button class="reg-btn m-r-20" @click="handleSubmit">保 存</el-button>
              <el-button class="reg-sub" @click="handleReset">重 置</el-button>
            </div>
          </div>
        </div>

      </div>
    </el-dialog>
  </div>
</template>

<script>

import { regNext, regPhoneCode } from '@/api/user'
import { userRegister } from '@/api/baseInfo/authority/user'
import userMixin from '@/utils/userMixin'
import { showNotice } from '@/utils/toolclass'
import storage from '@/utils/storage'

export default {
  components: {},
  mixins: [userMixin],
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    value: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      visible: false,
      isShow: false,
      count: 0,
      sendMsg: '获取验证码',
      timer: null,
      disabled: false,
      marginTop: '',
      userData: {},
      options: [
        {
          value: '1',
          label: '维保备案用户'
        },
        {
          value: '2',
          label: '使用单位备案用户'
        },
        {
          value: '3',
          label: '使用单位责任人用户'
        },
        {
          value: '4',
          label: '维保技术员'
        }
      ],
      form: {
        checkPass: '123456',
        nextCode: '',
        account: '', // 用户账号
        avatarUrl: '', // 头像URL
        email: '', // Email
        fromWhere: 4, // 注册来源 1：维保备案用户；2：使用单位备案用户；3：使用单位责任人用户；4：维保技术员
        id: '', // ID
        mobile: '18692614100', // 手机号码
        name: '汪海波', // 用户名
        orgId: '', // 机构ID
        pwd: '123456', // 密码
        sysId: 101, // 来源平台ID
        wxId: '', // 微信ID
        validateCode: '' // 验证码
      }
    }
  },
  watch: {
    visible(v) {
      this.$emit('input', v)
    },
    value(v) {
      this.visible = v
    }
  },
  created() {
    this.userInfo = JSON.parse(storage.get('userInfo'))
    // console.log(this.userInfo)
  },
  mounted() {},
  methods: {
    handleNext() {
      if (!(/^\S+$/.test(this.form.mobile))) {
        showNotice('error', '提示', '请输入手机号')
        return
      } else if (!(/^1[3456789]\d{9}$/.test(this.form.mobile))) {
        showNotice('error', '提示', '手机号格式错误，请重新输入')
        return
      }
      if (!(/^\S+$/.test(this.form.validateCode))) {
        showNotice('error', '提示', '请输入短信验证码')
        return
      } else if (!(/^\d{5}$/.test(this.form.validateCode))) {
        showNotice('error', '提示', '验证码错误，请重新输入')
        return
      }
      regNext({ phoneNumber: this.form.mobile, code: this.form.validateCode }).then(res => {
        if (res.code === '000000') {
          this.form.validateCode = res.data
          // console.log(res)
          this.isShow = true
          this.form.account = this.form.mobile
        } else {
          showNotice('warning', '提示', res.msg)
        }
      })
    },
    handleSend() {
      this.count++
      // if (this.count <= 10) {
      if (!(/^\S+$/.test(this.form.mobile))) {
        showNotice('error', '提示', '请输入手机号')
        return
      } else if (!(/^1[3456789]\d{9}$/.test(this.form.mobile))) {
        showNotice('error', '提示', '手机号格式错误，请重新输入')
        return
      } else {
        this.getCode(this.form.mobile)
      }
      // } else {
      //   showNotice('error', '提示', '一天只能发送10次验证码')
      //   return
      // }
    },
    getCode(phone) {
      if (phone !== undefined && !(/^1[3456789]\d{9}$/.test(phone))) {
        showNotice('error', '提示', '输入的手机号码有误,请重新输入')
        return
      } else {
        regPhoneCode(phone).then(res => {
          if (res.code === '000000') {
            // console.log(res)
            var time = 60
            const timer = setInterval(() => {
              time--
              if (time === 0) {
                clearInterval(timer)
                this.sendMsg = '获取验证码'
                this.disabled = false
                return
              }
              this.sendMsg = time + 's后重新发送'
            }, 1000)
            this.disabled = true
          }
          if (res.code === '100039') {
            showNotice('warning', '提示', '手机号已注册，请直接登陆')
            return
          } else {
            showNotice('success', '提示', '验证码发送成功')
            return
          }
        })
      }
    },
    // 提交函数
    handleSubmit() {
      // 验证表单
      if (!(/^\S+$/.test(this.form.name))) {
        showNotice('error', '提示', '请输入用户姓名')
        return
      }
      if (!(/^\S+$/.test(this.form.account))) {
        showNotice('error', '提示', '请输入登陆账号')
        return
      }
      if (this.form.email !== '') {
        if (!(/^\S+$/.test(this.form.email))) {
          showNotice('error', '提示', '请输入邮箱号码')
          return
        } else if (!(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(this.form.email))) {
          showNotice('error', '提示', '邮箱格式错误')
          return
        }
      }
      if (!(/^\S+$/.test(this.form.pwd))) {
        showNotice('error', '提示', '请输入密码')
        return
      }
      if (!(/^\S+$/.test(this.form.checkPass))) {
        showNotice('error', '提示', '请输入确认密码')
        return
      }
      if (this.form.checkPass !== this.form.pwd) {
        showNotice('error', '提示', '密码输入有误，请重新输入')
        return
      }
      if (!(/^\S+$/.test(this.form.fromWhere))) {
        showNotice('error', '提示', '请选择注册来源')
        return
      }
      // console.log(this.userInfo.orgList[0].id)
      // console.log(this.userData)
      const params = {
        account: this.form.account, // 用户账号
        avatarUrl: this.form.avatarUrl, // 头像URL
        email: this.form.email, // Email
        fromWhere: this.form.fromWhere === '' ? '' : parseInt(this.form.fromWhere), // 注册来源 1：维保备案用户；2：使用单位备案用户；3：使用单位责任人用户；
        id: this.form.id, // ID
        mobile: this.form.mobile, // 手机号码
        name: this.form.name, // 用户名
        orgId: this.userInfo.orgList[0].id, // 机构ID
        pwd: this.form.pwd, // 密码
        sysId: this.form.sysId, // 来源平台ID
        wxId: this.form.wxId, // 微信ID
        validateCode: this.form.validateCode // 验证码
      }
      // console.log(params)
      userRegister(params).then(res => {
        if (res.code === '000000') {
          // console.log(res)
          showNotice('success', '提示', '注册成功')
          this.$emit('handleRefresh')
          this.$emit('handleCloseDialog')
        } else {
          showNotice('error', '提示', res.msg)
        }
      })
    },
    // 重置表单函数
    handleReset() {
      this.form.name = ''
      this.form.pwd = ''
      this.form.email = ''
      this.form.fromWhere = ''
      this.form.checkPass = ''
    },
    handleCloseDialog() {
      this.$emit('handleCloseDialog')
      this.$emit('handleRefresh')
    }
  }
}
</script>

<style rel='stylesheet/scss' lang='scss'>
@import "@/styles/addtable.scss";
@import "@/styles/public.scss";

.create-user .el-form-item__error {
  display: none;
}
.reg1 {
  // margin-left: -40px;
}
.reg2 {
  // margin-left: -20px;
}
.create-user {
  height: 400px;
}
.create-user2 {
  height: 600px;
  .name1 {
    width: 80px;
    text-align: right;
  }
}
.createUser {
  width: 700px;
  background: #ffffff;
  .pu-i {
    width: 196px;
  }
  .form {
    // width: 540px;
    display: flex;
    justify-content: center;
    margin-left: -40px;
    .el-form-item {
      padding-left: 70px;
      margin-bottom: 10px;
    }
    .reg-next {
      width: 140px;
      height: 50px;
      color: #ffffff;
      border-radius: 10px;
      background: #3cb371;
    }
    .tip {
      color: #888888;
      font-family: Adobe Heiti Std R;
      margin-left: -10px;
    }
    .nextbox {
      margin-left: -30px;
    }
    .sendbox {
      margin-left: 80px;
      .reg-send {
        width: 134px;
        height: 50px;
        border-radius: 10px;
        color: #ffffff;
        background: #409EFF;
      }
    }
    h3 {
      color: #377EF7;
      font-size: 33px;
      text-align: center;
      margin: 0 0 20px 0;
      font-family: Adobe Heiti Std R;
    };
    .phoneCode {
      margin-right: 10px;
    };
    h5 {
      font-family: Adobe Heiti Std R;
      // font-size: 20px;
      margin: 0;
      text-align: center;
      color: #888888;
    }
    .cor-input {
      width: 230px;
    }
  }
  .subbtnbox {
    margin-left: 60px;
    .reg-btn {
      width: 140px;
      height: 50px;
      color: #ffffff;
      border-radius: 10px;
      background: #3cb371;
    }
    .reg-sub {
      width: 140px;
      height: 50px;
      border-radius: 10px;
      color: #ffffff;
      background: #409EFF;
    }
  }
}
</style>
